<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box1{
				background: red;
				overflow: hidden;
				/* margin-bottom: 20px; */
			}
			.box2{
				background: green;
				/* margin-top: 20px; */
			}
			
			.box1 p{
				width: 100px;
				background: yellow;
				
			}
						
			.box2 p{
				width: 100px;
				background: blue;				
			}
			p{
				float: left;
			}			
			
		</style>
	</head>
	<body>
		<!-- 
		 清除浮动的第六种方式
		 overflow:hidden；
		 作用：
		 1.可以将超出标签范围的内容裁剪掉   
		 2.可以清除浮动(设置在第一个盒子)		 
		 3.如果两个盒子是嵌套关系，那么设置了里面一个盒子顶部的外边距，外面一个盒子也会被顶下来，如果外面的盒子不想被一起顶下来，那么可以通过overflow:hidden；让里面的盒子设置margin-top之后, 外面的盒子不被顶下来
		 
		 注意点:IE6中不支持这种方式, 为了兼容IE6必须给前面的盒子添加*zoom:1;属性	 
		 -->
		 <div class="box1">
		 	<p>我是段落1</p>
		 	<p>我是段落1</p>
		 	<p>我是段落1</p>
		 </div>
		 <div class="box2">
		 	<p>我是段落2</p>
		 	<p>我是段落2</p>
		 	<p>我是段落2</p>
		 </div>
	</body>
</html>
